
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>计划结算管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        .layui-form-select .layui-edge {
            right: 20px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">计划类型</label>
                            <div class="layui-input-inline">
                                <select name="planType" lay-filter="planType">
                                    <option value="">请选择</option>
                                    <option value="1">配变电</option>
                                    <option value="2">线路工程</option>
                                    <option value="3">设备安装</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">结算状态</label>
                            <div class="layui-input-inline">
                                <select name="settlementState">
                                    <option value="">请选择</option>
                                    <option value="0">未结算</option>
                                    <option value="1">已结算</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">项目编号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="projectNo" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary"
                                    lay-submit lay-filter="data-search-btn">
                                <i class="layui-icon"></i> 搜索
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="stateTpl">
            {{# if(d.state == 1){ }}
            <span class="layui-badge layui-bg-green">已完成</span>
            {{# } else { }}
            <span class="layui-badge layui-bg-orange">未完成</span>
            {{# } }}
        </script>

        <script type="text/html" id="settlementStateTpl">
            {{# if(d.settlementState == 1){ }}
            <span class="layui-badge layui-bg-blue">已结算</span>
            {{# } else { }}
            <span class="layui-badge">未结算</span>
            {{# } }}
        </script>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="detail">详情</a>
            <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="edit">编辑</a>
            {{# if(d.settlementState == 0){ }}
            <a class="layui-btn layui-btn-xs" lay-event="settle">结算</a>
            {{# } }}
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
        </script>

        <!-- 添加编辑表单 -->
        <div id="edit" style="display: none">
            <div class="layui-form layuimini-form" lay-filter="edit">
                <input type="hidden" name="id">
                <div class="layui-form-item">
                    <label class="layui-form-label">物料编号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="projectNo" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">物料名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="projectName" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">计划类型</label>
                    <div class="layui-input-inline">
                        <input type="text" name="planTypeText" class="layui-input" readonly>
                        <input type="hidden" name="planType">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">完成状态</label>
                    <div class="layui-input-inline">
                        <select name="state" lay-verify="required">
                            <option value="0">未完成</option>
                            <option value="1">已完成</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">结算状态</label>
                    <div class="layui-input-inline">
                        <select name="settlementState" lay-verify="required">
                            <option value="0">未结算</option>
                            <option value="1">已结算</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            layer = layui.layer;

        // 初始化表格
        table.render({
            elem: '#currentTableId',
            url: '/settlement/queryPage',
            parseData: function(res) {
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.data.total,
                    "data": res.data.list
                };
            },
            toolbar: '#toolbarDemo',
            cols: [[
                {field: 'id', width: 80, title: 'ID', sort: true},
                {field: 'planType', width: 120, title: '计划类型',
                    templet: function(d){
                        return ['', '配变电', '线路工程', '设备安装'][d.planType];
                    }},
                {field: 'projectNo', width: 180, title: '项目编号'},
                {field: 'projectName', width: 200, title: '项目名称'},
                {field: 'state', width: 120, title: '完成状态', templet: '#stateTpl'},
                {field: 'settlementState', width: 120, title: '结算状态', templet: '#settlementStateTpl'},
                {title: '操作', minWidth: 180, toolbar: '#currentTableBar', align: "center"}
            ]],
            limits: [5, 10, 50, 100],
            limit: 10,
            page: true,
            skin: 'line'
        });

        // 搜索功能
        form.on('submit(data-search-btn)', function (data) {
            table.reload('currentTableId', {
                page: { curr: 1 },
                where: data.field
            });
            return false;
        });

        // 行工具事件
        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.alert('项目详情：' + JSON.stringify(data));
            } else if (obj.event === 'edit') {
                // 打开编辑表单
                openEditForm(data);
            } else if (obj.event === 'settle') {
                // 结算逻辑保持不变
                if (data.state == 1) {
                    updateSettlementState(data.id, 1);
                } else {
                    layer.confirm('本项目完成状态还未完成，是否继续结算？', {
                        btn: ['继续结算', '取消']
                    }, function (index) {
                        updateSettlementState(data.id, 1);
                        layer.close(index);
                    });
                }
            }
            // 新增删除事件
            else if (obj.event === 'delete') {
                layer.confirm('确定要删除这条记录吗？删除后将无法恢复！', {
                    icon: 3,
                    title: '删除确认'
                }, function (index) {
                    $.post("/settlement/delete", {
                        id: data.id
                    }, function (res) {
                        if (res.code === 0) {
                            layer.msg('删除成功', { icon: 1 });
                            table.reload('currentTableId');
                        } else {
                            layer.msg(res.msg || '删除失败', { icon: 2 });
                        }
                    });
                    layer.close(index);
                });
            }
        });

        // 打开编辑表单
        function openEditForm(data) {
            // 计划类型映射
            var planTypeMap = {
                1: '配变电',
                2: '线路工程',
                3: '设备安装'
            };

            // 填充表单数据
            form.val("edit", {
                id: data.id,
                projectNo: data.projectNo,
                projectName: data.projectName,
                planType: data.planType,
                planTypeText: planTypeMap[data.planType],
                state: data.state,
                settlementState: data.settlementState
            });

            // 渲染表单
            form.render('select');

            // 打开编辑窗口
            layer.open({
                title: '编辑项目信息 - ' + data.projectName,
                type: 1,
                shade: 0.2,
                maxmin: true,
                shadeClose: true,
                area: ['500px', '450px'],
                content: $("#edit")
            });
        }

        // 编辑表单提交
        form.on('submit(saveBtn)', function (data) {
            var formData = data.field;

            layer.confirm('确定要修改项目状态吗？', function (confirmIndex) {
                $.post("/settlement/update", formData, function(res) {
                    if (res.code === 0) {
                        layer.msg('状态更新成功', {icon: 1});
                        layer.close(confirmIndex);
                        layer.closeAll('page'); // 关闭所有弹出层
                        table.reload('currentTableId');
                    } else {
                        layer.msg(res.msg || '状态更新失败', {icon: 2});
                    }
                });
            });

            return false; // 阻止表单跳转
        });

        // 封装结算状态更新函数
        function updateSettlementState(id, state) {
            $.post("/settlement/updateState", {
                id: id,
                settlementState: state
            }, function(res) {
                if (res.code === 0) {
                    layer.msg('结算状态更新成功');
                    table.reload('currentTableId');
                } else {
                    layer.msg(res.msg || '结算状态更新失败');
                }
            });
        }

        form.render();
    });
</script>
</body>
</html>
